<style lang="less" scoped>
.feedback{
    width: 42px;
    height: 154px;
    background-color: #fff;
    border: 1px solid #E3E8EA;
    position: fixed;
    right: 10px;
    bottom: 317px;
    padding: 2px;
    color: #686E71;
    z-index:3;
    li{
        width: 36px;
        height: 36px;
        margin-bottom: 1px;
        cursor: pointer;
        position: relative;
    }
    .f1{
        background: url('../images/rightside_service_normal.png') no-repeat;
        background-size: 100% 100%;
        .div{
            position: absolute;
            width: 264px;
            height: 172px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            top: 0;
            left: -267px;
            display: none;
            padding: 15px;
            div{
                float: left;
                width: 116px;
                text-align: center;
                color:#686E71;
            }
            
        }
    }
    .f1:hover{
        background: url('../images/rightside_service_hover.png') no-repeat;
        background-size: 100% 100%;
        .div{
            display: block;
        }
    }
    .f2{
        background: url('../images/rightside_QR_normal.png') no-repeat;
        background-size: 100% 100%;
        .div{
            position: absolute;				
            width: 140px;
            height: 156px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            top: 0;
            left: -143px;
            display: none;
            padding: 15px;
            p{
                text-align: center;
                line-height: 17px;
                margin-bottom: 9px;
            }
            img{
                width: 100px;
                height: 100px;
            }
        }
    }
    .f2:hover{
        background: url('../images/rightside_QR_hover.png') no-repeat;
        background-size: 100% 100%;
        .div{
            display: block;
        }
    }
    .f3{
        background: url('../images/rightside_notice_normal.png') no-repeat;
        background-size: 100% 100%;
        .div{
            position: absolute;		
            width: 240px;
            height: 496px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            top: -200px;
            left: -242px;
            // display: none;
            padding: 15px;
            p{
                line-height: 22px;
                margin-bottom: 10px;
                font-size: 14px;
            }
        }
    }
    .f3:hover{
        background: url('../images/rightside_notice_hover.png') no-repeat;
        background-size: 100% 100%;
        .div{
            // display: block;
        }
    }
    .f4{
        background: url('../images/rightside_backtop_normal.png') no-repeat;
        background-size: 100% 100%;
        
    }
    .f4:hover{
        background: url('../images/rightside_backtop_hover.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>
<style lang="less">
.feedback{
    .ivu-input-wrapper{
        margin-bottom: 10px;
    }
    .ivu-checkbox-wrapper{
        width: 102px;
        margin-right: 0;
        margin-bottom: 11px;
    }
    .ivu-input{
        height: 36px;
        line-height: 36px;
    }
    textarea.ivu-input{
        width: 210px;
        height: 100px;
        resize: none;
    }
    Button{
        margin-left: 65px;
        margin-top: 6px;
    }
}
</style>
<template>
	<div>
         <ul class="feedback">
			<li class="f1">
				<div class="div">
					<div>
						<a target="_blank"  href="http://sighttp.qq.com/authd?IDKEY=d471b0698860cdae0048d64196d6652ca6daf3886dad47e2">
							<img src="../images/service_QQ.png"/>
							<p>QQ在线交谈</p>
							<p>3337826513</p>
						</a>
					</div>
					<div>
						<img src="../images/service_call.png"/>
						<p>客服: 400-056-9906</p>
						<p>商务: 021-64020620</p>
					</div>
				</div>
			</li>
			<li class="f2">
				<div class="div">
					<P>关注微信公众号</P>
					<img src="../images/Bitmap1.png" />
				</div>
			</li>
			<li class="f3" @click.stop="showBackModal">
				<div class="div" v-show="backModalType" @click.stop="">
					<p>反馈类型</p>
                    <CheckboxGroup v-model="checkAllGroup">
                        <Checkbox value="" label="1" >{{"登录/注册"}}</Checkbox>
						<Checkbox value="" label="7">{{"查看人物传记"}}</Checkbox>
						<Checkbox value="" label="2">{{"创建人物传记"}}</Checkbox>
						<Checkbox value="" label="8">{{"编辑人物传记"}}</Checkbox>
						<Checkbox value="" label="3">{{"个人设置"}}</Checkbox>
						<Checkbox value="" label="9">{{"增值服务"}}</Checkbox>
						<Checkbox value="" label="4">{{"亲友圈"}}</Checkbox>
						<Checkbox value="" label="10">{{"消息中心"}}</Checkbox>
						<Checkbox value="" label="5">{{"人生感悟"}}</Checkbox>
						<Checkbox value="" label="11">{{"其它"}}</Checkbox>
						<Checkbox value="" label="6">{{"家谱树"}}</Checkbox>	
                    </CheckboxGroup>
					<p>反馈内容</p>
					<Input v-model="backData" type="textarea" placeholder="请输入反馈内容" resized></Input>
					<p>联系方式</p>
					<Input v-model="backPhone" type="text" placeholder="请留下联系方式"></Input>
					<Button type="warning" @click="submitBack()">提交反馈</Button>					
				</div>
			</li>
			<li class="f4">
				<Back-top style="position: absolute; top:0; left:0; width:100%;height:100%;opacity: 0;"  :height="10">
				
				</Back-top>
			</li>
		</ul>
    </div>
</template>
<script>
    import global from '../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
		data() {
				return {
                    checkAllGroup:[],
                    backType:"",
				    backData:"",
                    backPhone:"",
				}
			},
        watch:{
        },
        props:["backModalType"],
		methods:{
            showBackModal(){//打开意见反馈弹窗
                this.$emit("backModalTypeFun",!this.backModalType)
			},
			submitBack(){
                //意见反馈
				if(this.checkAllGroup == ""){
					 this.$Message.error('请选择反馈类型！');
					 return;
				}
				if(this.backData == ""){
					 this.$Message.error('请输入反馈内容');
					 return;
				}
				if(!(/^1[3|4|5|7|8]\d{9}$/.test(this.backPhone))){
					this.$Message.error('请输入正确的手机号');
					return;
                }
                
				this.$http.post(global.host+"/feedback/pc/save",{"type":this.checkAllGroup.join(),"content":this.backData,"connection":this.backPhone},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.$Message.success('反馈成功');
					this.checkAllGroup = [];
					this.backData = "";
					this.backPhone = "";
				})
			},
		}
    }
</script>